<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<title>3D Effect for a Mobile App Showcase | Demo 3</title>
		<meta name="description" content="3D Mobile App Showcase" />
		<meta name="keywords" content="3d, mobile, layers, effect, css, showcase, perspective" />
		<meta name="author" content="Codrops" />
		<link rel="shortcut icon" href="../favicon.ico">
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/component.css" />
		<script src="js/modernizr.custom.js"></script>
	</head>
	<body>
		<div class="container">
			<!-- Top Navigation -->
			<div class="codrops-top clearfix">
				<a class="codrops-icon codrops-icon-prev" href="http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/"><span>Previous Demo</span></a>
				<span class="right"><a href="http://www.pixeden.com/psd-mock-up-templates/iphone-5-psd-flat-design-mockup">iPhone by Pixeden</a><a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=16056"><span>Back to the Codrops Article</span></a></span>
			</div>
			<header class="clearfix">
				<div class="inner">
					<h1>3D Effect <span>for a Mobile App Showcase</span></h1>
					<nav class="codrops-demos">
						<a href="index.html">Effect 1</a>
						<a href="index2.html">Effect 2</a>
						<a class="current-demo" href="index3.html">Effect 3</a>
					</nav>	
				</div>
			</header>
			<div class="ms-wrapper ms-effect-3">
				<button>toggle view</button>
				<div class="ms-perspective">
					<div class="ms-device">
						<div class="ms-object">
							<div class="ms-front"></div>
							<div class="ms-back"></div>
							<div class="ms-left ms-side"></div>
							<div class="ms-right ms-side"></div>
							<div class="ms-top ms-side"></div>
							<div class="ms-bottom ms-side"></div>
						</div><!-- /ms-object -->
						<div class="ms-screens">
							<a class="ms-screen-1"><div class="ms-label">Calendar Events</div></a>
							<a class="ms-screen-2"><div class="ms-label">Compose</div></a>
							<a class="ms-screen-3"><div class="ms-label">Accounts</div></a>
							<a class="ms-screen-4"><div class="ms-label">Inbox</div></a>
							<a class="ms-screen-5"><div class="ms-label">Invites</div></a>
						</div>
					</div><!-- /ms-device -->
				</div><!-- /ms-perspective -->
			</div><!-- /ms-wrapper -->
			<p class="note">Please note that browser support is very limited! Best viewed in Google Chrome and Firefox. IE 10 does not play well with preserve-3d for the transform-style.</p>
		</div><!-- /container -->
		<script src="js/classie.js"></script>
		<script src="js/phoneSlideshow.js"></script>
	</body>
</html>